<template>
  <div>
    <el-dialog custom-class="dialog"  title="组织架构" width="44%" :modal-append-to-body="false" :before-close="handleClose" v-el-drag-dialog :visible="isShow">
      <div style="height: 48vh;overflow: auto;position: relative;">
        <el-tree highlight-current  :data="tableData" :props="defaultProps" node-key="id"
                 ref="treeForm"
                 show-checkbox
                 check-strictly
                 @check-change="handleClick"
                 @node-click="nodeClick">
            <span class="slot-t-node" slot-scope="{ node, data }">
                <i :class="{'el-icon-office-building primary': data.type==0, 'el-icon-school':data.type==1}" />
                <span>{{ data.name }}</span>
            </span>
         </el-tree>
      </div>
      <div class="dialog-button-slot">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" :disabled="disabled" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
  .dialog{
    .el-dialog__header{
      border-bottom: 1px solid #eee;
    }
  }
  .dialog-button-slot{
    width: 100%;
    padding-top: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
</style>
<script>
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import utils from '../../utils/utils.js'
import { list } from '@/api/sysOffice'
export default {
  directives: { elDragDialog },
  data() {
    return {
      disabled: true,
      isShow: false,
      tableData: [],
      defaultProps: {
        children: 'childrens',
        label: 'name'
      },
      rowData: {}
    }
  },
  created() {

  },
  methods: {
    nodeClick(data,checked,node){
      if(data.disabled==false){
        this.$refs.treeForm.setCheckedNodes([data]);
        this.rowData = data;
        this.disabled = false;
      }
    },
    handleClick(data, checked, node){
      if(checked == true){
        this.$refs.treeForm.setCheckedNodes([data]);
        this.rowData = data;
        this.disabled = false;
      }
    },
    resetDisabled (treeData,type) {
      var _this = this;
       treeData.forEach(function (item) {

         item.disabled = (item.type>type);
         _this.resetDisabled(item.childrens)
       })
    },
    setDisabled (treeData) {
      var _this = this;
      treeData.forEach(function (item) {
        item.disabled = true;
        _this.setDisabled(item.childrens)
      })
    },
    treeControl (id) {
      if(!utils.isNull(id)){//禁选自己和子节点
        const obj = utils.findTree(id, this.tableData)
        this.resetDisabled(this.tableData,obj.type);
        obj.disabled = true
        this.setDisabled(obj.childrens)
      } else {
        this.resetDisabled(this.tableData,1);
      }
      this.isShow = true
    },
    show(id) {
      this.load(id)
    },
    handleClose(){
      this.isShow = false
    },
    confirm() {
      this.isShow = false;
      this.$emit('confirm', this.rowData)
    },
    load(id) {
      const _this = this
      const params = new URLSearchParams()
      list(params).then(response => {
        console.log(response)
        _this.tableData = response.data;
        _this.treeControl(id);
      }).catch(error => {
      })
    }
  }
}
</script>
